<template>
    <el-dialog
        :model-value="visible"
        :width="width || '500px'"
        :center="false"
        :class="className"
        :show-close="type !== 'msg-error'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="() => {emit('on-close')}"
    >
        <template #header>
            <div class="title-con" v-if="title">
                <i v-if="type === 'msg'" class="iconfont icon-tishi info-icon"></i>
                <i v-if="type === 'msg-error'" class="iconfont icon-guanbi1 error-icon"></i>
                <div class="title-txt" :title="title">{{ title }}</div>
            </div>
            <slot v-else name="title"></slot>
        </template>
        <slot></slot>
        <template #footer v-if="showFooter">
            <div class="dialog-footer">
               <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h36" @click="cancel">取消</el-button>
               <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="confirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    visible: {
        type: Boolean,
        default: false
    },
    width: {
        type: [Number, String],
        default: '500px'
    },
    type: {
        type: String,
        default: 'hahhah'
    },
    isNoPadding: {
        type: Boolean,
        default: false
    },
    showFooter: { // 是否显示底部按钮
        type: Boolean,
        default: false 
    },
    hideBorder: {
       type: Boolean,
       default: false  
    },
})
const emit = defineEmits(['on-close', 'on-confirm'])

const title = computed({
    get: () => {
        return props.title || ''
    },
    set: (val) => {
        return val
    }
})
const visible = computed({
    get: () => {
        return props.visible || false
    },
    set: (val) => {
        return val
    }
})

const className = computed(() => {
    if(props.isNoPadding) {
        return 'nopadding-dialog-con';
    }
    if(props.type === 'msg' || props.type === 'msg-error') {
        return 'msg-dialog-con';
    }
    if(props.hideBorder) {
        return 'resource-dialog-con no-border';
    }
    return 'resource-dialog-con';
})

function cancel(){
    emit('on-close')
}

function confirm(){
    emit('on-confirm')
}

</script>

<style lang="scss" scoped>
.title-con {
    display: flex;
    align-items: center;
    .iconfont {
        font-size: 24px;
        margin-right: 6px;
        &.info-icon {
            color: #FF9201;
        }
        &.error-icon {
            color: #FF4719;
        }
    }
    .title-icon-img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
    }
    .title-txt {
        line-height: 54px;
        color: var(--color-black);
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: calc(100% - 100px);
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top:1px solid#EFF0F2;
    padding: 20px 20px;
}

</style>
<style lang="scss">

.resource-dialog-con, .nopadding-dialog-con {
    .el-dialog__header {
        height: 54px;
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--color-gray-auxiliary3);
        margin-right: 0;
    }
    .el-dialog__close {
        &::before {
            content: "\e697";
            font-family: 'iconfont';
            font-style: normal;
            font-size: 14px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            text-decoration: none;
            color: var(--srt-color-black);
        }
        svg {
            display: none;
        }
    }

    .el-dialog__footer {
        padding: 0px;
    }
}
.resource-dialog-con {
    .el-dialog__body {
        padding: 30px 20px 20px;
    }
    .el-dialog__headerbtn {
        top: 1px;
    }
}

.no-border {
    .el-dialog__header {
        border-bottom: none !important;
    }
    .title-txt {
        position: relative;
        &::before {
            content: '';
            width: 4px;
            height: 15px;
            background: var(--srt-main-active-text-color);
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
            transform: translateY(-1px);
        }
    }
}

.nopadding-dialog-con {
    .el-dialog__body {
        padding: 0;
    }
}
.msg-dialog-con {
    .el-dialog__header {
        height: 54px;
        padding: 0 20px;
        box-sizing: border-box;
        margin-right: 0;
    }
    .el-dialog__body {
        padding: 0 20px 20px 50px;
    }
}
</style>